<template>
  <div class="Internet">
    <lRTitle :text="statusTitle"></lRTitle>
    <div class="content">
      <div class="top">
        <div class="left">
          <img src="@/assets/aiScreen/jsym.png" alt="jsym" class="leftBg" />
          <span class="title1">加速域名</span>
          <span class="data">{{ acceDomainCount }} 次</span>
        </div>
        <div class="right">
          <img src="@/assets/aiScreen/zdym.png" alt="zdym" class="rightBg" />
          <span class="title1">阻断域名</span>
          <span class="data">{{ blockDomainCount }} 次</span>
        </div>
      </div>
      <div class="bottom">
        <div class="left">
          <img src="@/assets/aiScreen/sxym.png" alt="sxym" style="position: absolute; left: -1%" class="leftBg" />
          <span class="title1">上行加速</span>
          <span class="data">{{ realSpeed.UpRate || 0 }} KB/S</span>
        </div>
        <div class="right">
          <img src="@/assets/aiScreen/xxym.png" alt="xxym" class="rightBg" />
          <span class="title1">下行加速</span>
          <span class="data">{{ realSpeed.DownRate || 0 }} KB/S</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import lRTitle from "./lRTitle.vue";
import { connrequest } from "@/api/firstPage";
export default {
  name: "netAcceleration",
  props: {},
  data() {
    return {
      statusTitle: "网络加速",
      netAcceSum: {},
      realSpeed: {},
      acceDomainCount: 0,
      blockDomainCount: 0
    };
  },
  mounted() {
    this.getNetAccelerationSum();
    this.getHistorySumStreamLog();
  },
  methods: {
    async getNetAccelerationSum() {
      const res = await connrequest("GetShadowURLSumGroupByAccessType");
      this.netAcceSum = res.Data;
      if (this.netAcceSum.length > 0) {
        this.acceDomainCount = this.netAcceSum.find((item) => item.ClassID === 2).Count;
        this.blockDomainCount = this.netAcceSum.find((item) => item.ClassID === 1).Count;
      }
    },
    async getHistorySumStreamLog() {
      const data = {
        Filter: {
          SumCount: 1
        }
      };
      const res = await connrequest("GetHistorySumStreamLog", data);
      if (res.Status.SttatusCode === 0) {
        this.realSpeed = res.Data;
      }
    }
  },
  components: {
    lRTitle
  }
};
</script>
<style scoped>
.Internet {
  display: flex;
  flex-direction: column;
  height: 20%;
}
.content {
  display: flex;
  overflow: auto;
  position: relative;
  flex-direction: column;
  flex: 1;
  margin: 0 15px 0px 50px;
}
.top {
  display: flex;
  position: absolute;
  width: 100%;
  height: 50%;
  flex-direction: row;
  flex-wrap: nowrap;
}
.bottom {
  position: absolute;
  display: flex;
  bottom: 0;
  width: 100%;
  height: 50%;
  /* background-color: bisque; */
}
.left {
  position: absolute;
  width: 50%;
  height: 100%;

  /* background-color: aqua; */
}
.right {
  position: absolute;
  right: 0;
  width: 50%;
  height: 100%;
  /* background-color: antiquewhite; */
}
.title1 {
  position: absolute;
  left: 32%;
  top: 10%;
  color: #9faebb;
}
.data {
  position: absolute;
  left: 32%;
  top: 35%;
  margin-top: 5px;
  color: #fff;
}
</style>
